<template>
  <div class="main">
    <!-- 头部导航栏 -->
    <head-component
     :noBack="true"
     :rightClick="rightClick"
     :rightIcon="rightIcon"
     style="height:1rem"
     title="首页"/>

  <!--banner-->
    <van-swipe :autoplay="3500" class="banner">
      <van-swipe-item @click="location.href = item.b_link" v-for="(item,i) in bannerImg" :key="i"><img :src="item.b_img" alt=""></van-swipe-item>
    </van-swipe>
  <!-- 公告-->
    <div class="mid">
      <img src="@/common/icon/ggIcon.png" alt="">
      <div class="list">
        <van-swipe :autoplay="3000"  :vertical="true"  :show-indicators="false">
          <van-swipe-item v-for="(item,i) in noticeList" :key="i">
            <p class="f28 col_66">{{item.log_content}}</p>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

  <!-- 分类-->
    <div class="nav">
      <ul>
        <li  @click="$router.push({path:'/daikuan', query:{type: 1}})" ><img src="@/common/icon/navIcon1.png" alt=""><p class="f28 col_33">贷款中心</p></li>
        <li  @click="$router.push({path:'/daikuan', query:{type: 2}})" ><img src="@/common/icon/navIcon2.png" alt=""><p class="f28 col_33">信用卡</p></li>
        <li  @click="$router.push({path:'/ganhuo'})" ><img src="@/common/icon/navIcon3.png" alt=""><p class="f28 col_33">信贷秘籍</p></li>
        <li  @click="toPage('/chaxun')"><img src="@/common/icon/navIcon4.png" alt=""><p class="f28 col_33">大数据查询</p></li>
        <li  @click="$router.push({path:'/gonglue'})"><img src="@/common/icon/navIcon5.png" alt=""><p class="f28 col_33">产品攻略</p></li>
        <li  @click="$router.push('/ziliao')"><img src="@/common/icon/navIcon6.png" alt=""><p class="f28 col_33">网贷资料包</p></li>
        <li  @click="$router.push({path:'/daikuan', query:{type: 3}})"><img src="@/common/icon/navIcon7.png" alt=""><p class="f28 col_33">黑户专享</p></li>
        <li  @click="$router.push({path:'/daikuan', query:{type: 4}})" ><img src="@/common/icon/navIcon8.png" alt=""><p class="f28 col_33">空卡代还</p></li>
      </ul>
    </div>

<!--    推荐-->
    <div class="mid2">
      <div class="top"><p class="f36 col_33">热门推荐</p></div>
      <div class="con">
        <div class="list"  v-for="(item,i) in goodsList" :key="i"  @click="toWl(item.p_id, item.p_name)">
          <p class="top col_ff">推荐</p>
          <img :src="item.p_img" alt="">
          <p class="f30 col_33 oneline">{{item.p_name}}</p>
          <span class="tit2 f24 col_99 oneline">{{item.p_title}}</span>
          <div class="price f30">返佣{{item.p_award}}</div>
          <div class="time f24 col_ff oneline">{{item.p_des}}</div>
        </div>

      </div>
    </div>

<!-- 最新资讯   -->
    <div class="bot">
      <div class="top"><p class="f36 col_33">最新资讯</p><span class="f32 col_99" @click="toPage('/zixun')">更多</span></div>
      <div class="con">
        <div class="list" v-for="(item,i) in newsList" :key="i"  @click="toZx(item.id,2, item.news_title)">
          <div class="left">
            <p class="f30 col_33 twoLine">{{item.news_title}}</p>
            <!-- <div class="f24 col_99">{{item.news_addtime}}</div> -->
          </div>
          <img :src="item.news_img" alt="">
        </div>
      </div>
    </div>

    <!-- 按钮 -->
<!--    <div class="global_btn">提交</div>-->
    <!-- 底部导航栏 -->
    <foot-component :select = '0'/>
  </div>
</template>
<script>
// import {mapActions, mapGetters} from 'vuex'
export default {
  name: '',
  components: {
    'headComponent':()=>import('@/components/layout/head'),
    'footComponent':()=>import('@/components/layout/foot')
  },
  data() {
    return {
      rightIcon: require("@/common/icon/home/news.png"),
      bannerImg:[],
      noticeList:[],
      goodsList:[],
      newsList:[],
      userStatus:0,
      wHref:''
    }
  },
  mounted() {},
  created(){
    this.getNews()
    this.zixun();

  },
  methods: {
    getNews(){
      var $this = this;
      var t = this.$toast.loading({message:'正在加载数据',mask:true, duration:9999})
      var data = {u_id: localStorage.getItem('uid'),token:localStorage.getItem('token')};
      $this.$axios.post('index.php?m=index&c=index',data)
        .then((res) => {
          t.clear();
          if(res.data.code == 1){
            $this.bannerImg = res.data.banner;
            $this.goodsList = res.data.goods;
            $this.noticeList = res.data.log_content;
            $this.wHref = res.data.credit_inquiry;
          }else{
            $this.$router.push('/login');
          }
        });
      //  个人信息
      this.userStatus = localStorage.getItem('isVip')
    },
    // ...mapActions('home',['updateUser']),
    rightClick(){
      var $this = this;
      if($this.userStatus != 0){
        $this.$router.push('/news');
      }else{
        this.$toast({
          message: '请先开通VIP',
          duration: 800,
          onClose: ()=> {
            this.$router.push('/vip');
          }
        })
      }
    },
    toZx(id,type,title){
      var $this = this;
      if($this.userStatus != 0){
        $this.$router.push({path:'/ganhuoD', query:{id: id,type:type, title:title}})
      }else{
        $this.$toast({
          message: '请先开通VIP',
          duration: 800,
          onClose: ()=> {
            $this.$router.push('/vip');
          }
        })
      }
    },
    toPage(path){
      var $this = this;
        if(path){
          $this.$router.push(path);
        }else{
          location.href = $this.wHref;
        }
    },
    toWl(id, name){
      var $this = this;
      $this.$router.push(`/daikuanDetails?id=${id}&&name=${name}&&type=7`)
      // if($this.userStatus != 0){
      //   // location.href = path;
      //   $this.$router.push(`/daikuanDetails?id=${id}&&name=${name}&&type=7`)
      // }else{
      //   $this.$toast({
      //     message: '请先开通VIP',
      //     duration: 800,
      //     onClose: ()=> {
      //       $this.$router.push('/vip');
      //     }
      //   })
      // }
    },
    toXq(num){
      var $this = this;
      if($this.userStatus != 0){
        if(num == 3){
          $this.$router.push({path:'/ganhuo'})
        }else if(num == 4) {
          $this.$router.push({path:'/gonglue'})
        }else{
          $this.$router.push({path:'/daikuan', query:{type: num}})
        }
      }else{
        $this.$toast({
          message: '请先开通VIP',
          duration: 800,
          onClose: ()=> {
            $this.$router.push('/vip');
          }
        })
      }
    },
    zixun(){
      var $this = this;
      var data = {u_id: localStorage.getItem('uid'), token: localStorage.getItem('token')};
      $this.$axios.post('index.php?m=index&c=consult', data)
        .then((res) => {
          if (res.data.code == 1) {
            res.data.news.map((item, index) => {
              if(item.c_id == 14){
                let obj={
                  c_id: item.c_id,
                  id: item.id,
                  news_addtime: item.news_addtime,
                  news_content: item.news_content,
                  news_img: item.news_img,
                  news_looks: item.news_looks,
                  news_title: item.news_title,
                  news_tui: item.news_tui,
                  news_type: item.news_type
                }
                $this.newsList.push(obj)
              }
            })
          } else {
            $this.$router.push('/login');
          }
        });
    },
    // toLoad(){
    //   var $this = this;
    //   // if($this.userStatus != 0){
    //     var task = plus.downloader.createDownload("http://www.yykjxxzx.com/static/upload_file/网贷资料包.xlsx",  {filename:"_doc/update/"}, function(d, status){
    //       // 下载完成
    //       if(status == 200){
    //         console.log("Download success: " + d.filename);
    //         $this.$toast({
    //           message: '下载完成',
    //           duration: 800,
    //         })
    //       } else {
    //         $this.$toast({
    //           message: '下载失败',
    //           duration: 800,
    //         })
    //         console.log("Download failed: " + status);
    //       }
    //     });
    //     //dtask.addEventListener("statechanged", onStateChanged, false);
    //     task.start();
    //   // }else{
    //   //   this.$toast({
    //   //     message: '请先开通VIP',
    //   //     duration: 800,
    //   //     onClose: ()=> {
    //   //       this.$router.push('/vip');
    //   //     }
    //   //   })
    //   // }
    // },
    showToast(){
      this.$toast({
        message: '请先开通VIP',
        duration: 800,
        onClose: ()=> {
          this.$router.push('/vip');
        }
      })
    },
    // showToast2(){
    //   var $this = this;
    //   if($this.userStatus != 0){
    //     this.$toast({
    //       message: '您已是VIP',
    //       duration: 800
    //     })
    //   }else{
    //     this.$router.push('/vip');
    //   }
    // },
    // shoast(){
    //   this.$toast({
    //     message: '准备开放中',
    //     duration: 800
    //   })
    // }
  },
  computed: {
    // ...mapGetters('home',{
    //   getUser: 'getUser',
    // })
  },

}
</script>
<style scoped lang="less">
  .main{width: 100%;background: #fff;}
  .oneline{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
  .twoLine{overflow:hidden;display:-webkit-box;text-overflow: ellipsis;-webkit-line-clamp:2;-webkit-box-orient: vertical;white-space: normal;}
  .banner{
    width: 92%;
    margin: 1.2rem auto 0;
    height: 4rem;
    div{
      width: 100%;height: 100%;}
    img{
      width:100%;
      height: 100%;
      border-radius: 0.16rem;
    }
    .mint-swipe-indicators{background: rgba(255,255,255,0.5)!important;width: 0.3rem!important;height: 0.3rem!important;}
    .is-active{background: rgba(255,255,255,1)!important;}
  }
  .mid{width:92%;
    margin: 0.25rem auto;
    overflow:hidden ;
    img{
      float: left;
      width: 0.6rem;
      height: 0.6rem;
    }
    .list{
      float: left;
      margin-left: 0.2rem;
      height: 0.6rem;
      width: 88%;
      div,p{height: 100%;width: 98%;line-height: 0.6rem;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;text-align: left;}
    }
  }
  .nav{width: 100%;overflow: hidden;border-bottom: 0.266rem solid #f5f5f5;
    ul{
      width: 100%;
      overflow: hidden;
      li{
        float: left;
        width: 25%;
        margin-bottom: 0.533rem;
        text-align: center;
        img{
          width: 1.33rem;
          height: 1.33rem;
          border-radius: 100%;
          display: block;
          margin: 0 auto;
          margin-bottom: 0.16rem;
        }
      }
    }
  }
  .mid2{width: 100%;padding: 0.57rem 0.4rem;border-bottom: 0.266rem solid #f5f5f5;
    .top{
      overflow: hidden;
      margin: 0 auto;
      height: 0.6rem;
      line-height: 0.48rem;
      p{
        float: left;
        padding-left: 0.266rem;
        border-left: 0.133rem solid #409aff;
        font-weight: 600;
      }
      span{ float:right;} }
    .con{
      margin: 0 auto;
      overflow-x: auto;
      white-space: nowrap;
      margin-top: 0.5333rem;
      .list:last-child{margin-right: 0;}
      .list{
        display: inline-block;
        position: relative;
        width: 3.56rem;
        height: 4.4rem;
        border-radius: 0.16rem;
        border: 0.02rem solid #f5f5f5;
        margin-right: 0.4rem;
        position: relative;
        text-align: center;
        overflow:hidden;
        .top{width: 100%;height: 0.46rem;line-height: 0.46rem;text-align: center;font-size: 0.266rem; transform: rotate(-45deg);
          position: absolute;background: #ff6840;top: 0.16rem;left: -1.36rem;
        }
        img{width: 1.173rem;
          height: 1.173rem;
          display: block;
          margin: 0.4rem auto 0.26rem;
        }
        .tit2{line-height: 0.66rem;}
        .price{color: #fd5f5f;font-weight: 600;/*margin-bottom: 0.12rem*/}
        .time{ position: absolute; left:0; bottom:0px; width: 100%;height: 0.62rem;line-height: 0.6rem;background: #99c6f9;}
      }
    }
  }
  .bot{
    width:100%;
    margin-bottom: 1.8rem;
    // padding: 0.57rem 0;
    .top{
      width: 92%;overflow: hidden;
      margin: 0 auto;
      margin: 0.6rem auto;
      // line-height: 0.48rem;
      p{
        float: left;
        padding-left: 0.266rem;
        border-left: 0.133rem solid #409aff;
        font-weight: 600;
      }
      span{
        float:right;}
    }
    .con{width: 92%; margin: 0.5333rem auto 1.2rem;
      .list:last-child{
        margin-bottom: 1.5rem;
      }
      .list{
        display: flex;
      display: -webkit-flex;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-align-items: center;
      align-items: center;
      padding: 0.23rem 0;
      border-top: 0.02rem solid #f5f5f5;
      overflow: hidden;
        .left{
          float: left;
          width: 58%;
          p{
            line-height: 0.7rem;
            height: 1rem;
            line-height: 1rem;
            // margin-bottom: 0.36rem;
          }
        }
        img{
          // width: 2.8rem;
          height: 1.2rem;
          border-radius: 0.12rem;
          float: right;
        }
      }
    }
  }
</style>
